import {LitElement, html, css} from 'lit';
import {customElement} from 'lit/decorators.js';
import {routes} from "@route/routes.ts";

// 使用 @customElement 装饰器定义组件名称
@customElement('main-drawer')
export class MainDrawer extends LitElement {

  // 定义组件的样式
  static styles = css`
      :host {
          display: flex;
          flex-direction: column;
          justify-content: start;
          align-items: center;
          padding: 16px 32px;
          background-color: white;
      }

      a.nav-item {
          text-decoration: none; /* 去掉下划线 */
          color: inherit; /* 继承父元素文字颜色 */
          display: block; /* 使 <a> 标签可以设置宽度和高度 */
          width: 100%; /* 卡片宽度 */
          padding: 16px; /* 内边距 */
          border-radius: 8px; /* 圆角 */
          transition: all 0.3s ease; /* 添加过渡效果 */
      }

      /* 鼠标悬停效果 */

      a.nav-item:hover {
          //transform: translateY(-5px); /* 向上移动 */
          //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 加深阴影 */
          background-color: #f3f3f3;
      }
  `;

  // 定义组件的渲染逻辑
  render() {
    return html`
      ${routes.map(route => {
        return html`
          <a class="nav-item" href="${route.path}">${route.title}</a>
        `;
      })}
    `;
  }
}

// 确保组件在浏览器中注册
declare global {
  interface HTMLElementTagNameMap {
    'main-drawer': MainDrawer;
  }
}